<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.net/vue-router/4.2.4/vue-router.global.min.js"></script>
</head>

<body>
    <div id="app">

        <router-link to="/one">跳到主页</router-link>
        <br>
        <router-link to="/two">跳到详情页</router-link>
        <br>
        <router-link to="/three">跳到订单详情页</router-link>
        <br>
        <router-view></router-view>
    </div>

    <template id="one">
        <div>主页</div>
    </template>

    <template id="two">
        <div>详情页</div>
    </template>

    <template id="three">
        <div>订单详情页</div>
    </template>
</body>

<script>

    let oneconfig = {
        template: '#one',
        data() {
            return {

            }
        }
    }
    let twoconfig = {
        template: '#two',
        data() {
            return {

            }
        }
    }

    let threeconfig = {
        template: '#three',
        data() {
            return {

            }
        }
    }
    let appconfig = {
        data() {
            return {
                message: "hello"
            }
        },
        components: {
            one: oneconfig,
            two: twoconfig,
            three: threeconfig
        }
    }

    //配置路由路径表
    let routes = [
        { path: '/one', component: oneconfig },
        { path: '/two', component: twoconfig },
        { path: '/three', component: threeconfig }
    ]

    //创建vuerouter的实例
    let router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes,
    });

    let vue = Vue.createApp(appconfig);
    //vuerouter 注册到vue 中
    vue.use(router);
    vue.mount("#app");
</script>

</html>